<template>
	<div class='headerComponents'>
		<span style='display: inline-block;position: absolute; right: 10px;'@click="popupVisible=true">
			<img v-bind:src="imgConfig.plus" style='width: 16px;'>
		</span>
		<mt-popup v-model="popupVisible" popup-transition="popup-fade" :modal='false' class='toc_IM_popup'>
			<div @click="emitHeaderComponentsData('groupChat')">
				<span>创建群聊</span>
			</div>
		</mt-popup>
		
	</div>
</template>

<script>
	import imgConfig from '@/assets/scripts/imgConfig.js'
	export default {
	  	name: 'headerComponents',
	  	props: ['componentsData'],
	  	data(){
		    return {
		    	imgConfig:imgConfig,
		    	popupVisible:false
		    }
		},
		mounted(){
			
		},
		methods:{
			emitHeaderComponentsData(data){
				this.popupVisible=false;
				this.$emit('emit-components',{
					runFunction:'createGroupChat'
				});
			}
		}
	}
</script>

<style>
	div.headerComponents{
		position: absolute;
		top:0;		
		max-height: 50px;
		height: 50px;
		max-width: 50px;
		width: 50px;
		box-sizing: border-box;
		line-height: 50px;
	}
	div.headerComponents.lc{
		left: 10px;
	}
	div.headerComponents.rc{
		right: 10px;
	}
	div.toc_IM_popup{
		width: 150px;
	    top: 100%;
	    right: 5px;
	    position: absolute;
	    left: auto;
	    transform:none;
	    border-radius: 5px;
	    color: #000;
	    font-size: 14px;
	    box-shadow: -1px 1px 5px #ccc;
	}
	div.toc_IM_popup:after{
		display: inline-block;
	    width: 0;
	    height: 0;
	    border: solid transparent;
	    border-width: 10px;
	    border-bottom-color: #fff;
	    content: "";
	    position: absolute;
	    top: -20px;
	    right: 4px;
	}
</style>